import { useEffect, useState } from "react";
import { createBrowserHistory } from "history";
import { NavigationContext, LocationContext } from "./context";
/*
  BrowserRouter 
      最外层包裹，内部通过context方式给后代组件通信相关数据
        navigation 用来编程式导航（路由跳转）
        location 用户获取pathname（当前路由路径）
*/
export default function BrowserRouter({ children }) {
  // 创建前端路由的history模式
  const history = createBrowserHistory();
  // 通信的navigation具体数据 --> 用来编程式导航
  const navigationContext = {
    navigator: history,
  };

  const [state, setState] = useState({
    location: {
      pathname: history.location.pathname,
    },
  });

  useEffect(() => {
    // 监听浏览器历史记录的变化（监听路由路径的变化）
    // history.listen(({ location }) => {
    //   setState({
    //     location,
    //   });
    // });

    // 简写
    history.listen(setState);
  }, [history]);

  // 通信的location具体数据 --> 获取pathname
  const locationContext = state;

  return (
    <NavigationContext.Provider value={navigationContext}>
      <LocationContext.Provider value={locationContext}>
        {/* 
          children实际渲染的就是App组件 
          App组件或其他组件都是后代组件，就能使用context通信
        */}
        {children}
      </LocationContext.Provider>
    </NavigationContext.Provider>
  );
}
